<template>
    <div class="cl3">
        <div class="iHead">工作目标</div>

        <div class="cont">
            <div class="cont-i" v-for="(i, o) in infoData[2]" :key="o">
                <div class="cont-ii"
                    v-if="(btnsIndex == 2 && (o == '0' || o == '1' || o == '2')) || (btnsIndex == 3 && (o == '0' || o == '1' || o == '3')) || (btnsIndex == 4 && (o == '0' || o == '1' || o == '4'))">
                    <div class="cont-i-l">{{ i[1] }} ：</div>
                    <div class="cont-i-rs" v-if="o !== 1">
                        <div class="cont-i-r" v-for="(n, m) in i" :key="m">
                            <div class="cont-i-rs" v-if="o == 0 && m == '2'">
                                <div v-for="(s, d) in n.split('、')" :key="d">
                                    <b>{{ s.substring(0, 2) }}</b>
                                    <p>{{ s.substring(2) }}</p>
                                </div>
                            </div>
                            <div v-else>
                                <p v-if="m !== '1'">{{ n }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="cont-i-bs" v-else>
                        <div :class="['cont-i-b', btnsIndex == m ? 'cont-i-b-a' : '']" @click="btnsIndex = m"
                            v-for="(n, m) in i" :key="m">
                            <p v-if="m !== '1'">{{ n }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['infoData'],
    data() {
        return {
            btnsIndex: 2
        }
    },
    mounted() {

    },
    methods: {

    }

}
</script>

<style lang="scss" scoped>
.cl3 {
    width: 900px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .iHead {
        margin-top: 50px;
        margin-bottom: 20px;
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 900px;
        height: 300px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .cont {
        position: relative;
        z-index: 2;
        margin-top: 10px;
        color: #fff;

        .cont-i {
            letter-spacing: 3px;

            .cont-ii {
                display: flex;
                margin-bottom: 20px;
            }

            .cont-i-l {
                text-shadow: 0 0 8px #000;
                font-size: 16px;
                width: 120px;
            }

            .cont-i-rs {
                width: 700px;

                .cont-i-r {
                    margin-bottom: 5px;
                    text-shadow: 0 0 8px #000;

                    .cont-i-rs {
                        display: flex;

                        div {
                            display: flex;
                            align-items: center;

                            &::after {
                                content: '、'
                            }
                        }

                        div:last-of-type {
                            &::after {
                                content: ''
                            }
                        }
                    }

                    p,
                    b {
                        font-size: 16px;

                    }
                }

                .cont-i-r:first-of-type {
                    margin-bottom: 0;
                }
            }

            .cont-i-bs {
                display: flex;
                align-items: center;

                .cont-i-b {
                    margin-right: 10px;

                    p {
                        font-size: 16px;
                        padding: 2px 15px;
                        cursor: pointer;
                        border-radius: 4px;
                        box-sizing: border-box;
                        border: 1px solid #409EFF;

                        &:hover {
                            border-color: #66b1ff;
                            background-color: #66b1ff;
                        }
                    }
                }

                .cont-i-b:first-of-type {
                    display: none;
                }

                .cont-i-b-a {
                    p {
                        border-color: #409EFF;
                        background-color: #409EFF;
                        color: #fff;

                        &:hover {
                            border-color: #66b1ff;
                            background-color: #66b1ff;
                        }
                    }
                }
            }
        }
    }
}
</style>